<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<title>我的订单</title>
<link type="text/css" rel="stylesheet" href="/static/css/s.common.css">
<link type="text/css" rel="stylesheet" href="/static/css/s.agent.css">
<script type="text/javascript" src="/static/js/jquery.min.js?v=0.01"></script>
<script type="text/javascript" src="/static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="/static/js/common.js?v=0.04"></script>

<link type="text/css" rel="stylesheet" href="/static/js/dropload/dropload.css">
<script type="text/javascript" src="/static/js/dropload/dropload.min.js"></script>

<link type="text/css" rel="stylesheet" href="/static/css/order_index.css">

</head>
<body>

<div id="pages">

	<div class="g-am-init g-reset">
		<div class="am-tabs am-tabs-top" style="overflow:hidden;">
			<div role="tablist" class="am-tabs-bar" tabindex="0">
				
				<!--状态导航-->
				{volist name='$orderstatus' id='v'}
				<div role="tab" data-status="{$v.status}" class="{if condition="$v.status eq $search.status"}am-tabs-tab-active{/if} am-tabs-tab">
					<div class="g-tabs g-relative">
						<div>{$v.name}</div>
						{if condition="$v.StatusNum gt 0"}
						<div class="g-absolute" style="display: block; height: 30px; width: 30px; top: 42px; left: 60px; background: rgb(246, 111, 98); border-radius: 15px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 20px; line-height: 30px; font-family: &quot;&quot;; color: white; z-index: 20;">{$v.StatusNum}</div>
						{/if}
					</div>
					<div class='tab-na'></div>
				</div>
				{/volist}
				<!--状态导航 End-->
				
			</div>
			
	<div class="am-tabs-content am-tabs-content-animated" id="container" style="transform: translateX(0%) translateZ(0px);">
			
	<div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-active">

<!--搜索-->

<div class="g-flex g-search-box" style="background: rgb(239, 239, 244);">
<style>
{empty name='orderinfo'}.g-search-box{ height:0;overflow:hidden;}{/empty}
.tab-na{ display:none; width:100%; height:4px; left:0;bottom:0; position:absolute; background:#5c8dff; }
.am-tabs-tab-active .tab-na{ display:block;}
.am-search-cancel{ margin-right:-80px; user-select: none!important; }
.am-search-start{ }
.am-search-start .am-search-synthetic-ph{ box-sizing:border-box; text-align:left; }
.am-search-start .am-search-synthetic-ph-placeholder{ visibility:hidden; }
.am-search-start .am-search-cancel{ margin-right:0px; opacity: 1; }
.am-search-start .am-search-clear{ display:flex; }
</style>
<form class="am-search g-col{if condition="$search.key neq ''"} am-search-start{/if}" action="">
<div class="am-search-input">
<div class="am-search-synthetic-ph" style="width: 100%;">
	<span class="am-search-synthetic-ph-container">
		<i class="am-search-synthetic-ph-icon"></i>
		<span class="am-search-synthetic-ph-placeholder">订单号/姓名/电话</span>
	</span>
</div>
<input type='hidden' name='page' value="{$search.page}">
<input type='hidden' name='status' value="{$search.status}">
<input type="search" name='key' autocomplete='off' class="am-search-value" style="outline:0;" value="{$search.key}" placeholder="订单号/姓名/电话">
<a class="am-search-clear"></a>
</div>
<div class="am-search-cancel" style="transition:all ease .3s">搜索</div>
</form>
<span class="iconfont icon-xq- g-fs-40 g-black-light" style="line-height: 88px; margin-left: 14px; padding-right: 30px;"></span>

</div>
<script>
$(function(){
	$('.am-search-value').focus(function(){
		$('form.am-search').addClass('am-search-start');
		if($(this).val() == ''){
			$('span.am-search-synthetic-ph-placeholder').css('visibility','visible');
			$('a.am-search-clear').css('display','none');
		}else{
			
		}
	});
	$('.am-search-value').on('input propertychange',function(){
		if($(this).val() == ''){
			$('span.am-search-synthetic-ph-placeholder').css('visibility','visible');
			$('a.am-search-clear').css('display','none');
		}else{
			$('span.am-search-synthetic-ph-placeholder').css('visibility','hidden');
			$('a.am-search-clear').css('display','flex');
		}
	});
	$('a.am-search-clear').click(function(){
		$('.am-search-value').val('');
		$('.am-search-value').focus();
		//$('.am-search-value').trigger('propertychange');
	});
	$('.am-search-cancel').click(function(){
		$("[name='page']").val('1');
		$('form.am-search').submit();
	});
});
</script>

<!--搜索 End-->

		<div class="common-pull-scroll pull-view-wrap scroll-container-0" style="padding-bottom: 0px;overflow-x:hidden;">
			
			{notempty name='orderinfo'}
			<div class='scroll-item' style="transform: translateY(0px);">
				<div>
					<div id='order-items'>
						{volist name='orderinfo' id='v'}
						<a class="g-reset g-flex g-fd-c g-bg-white g-m-b" data-id="{$v.OrderID}" href="{:url('Order/detail',['id'=>$v.OrderID])}">
							<div>
								<div class="g-flex g-jc-sb g-bb g-pd">
									<div>订单编号：{$v.OrderID}</div>
									<div class="g-blue-middle" style="color: rgb(92, 141, 255);">{$v.Status|__order_status}</div></div>
							</div>
							<div>
								{volist name='$v.Product' id='y'}
								<div>
									<div class="g-flex g-pd g-bb">
										<img src="{$y.MainImg}" alt="" class="g-img-140">
										<div class="g-flex g-fd-c g-col g-pd-lr g-jc-sb">
											<div class="g-twoline g-fs-30">{$y.ProductName}</div>
											<small class="g-black-light">
												<span></span>
											</small>
											<div class="g-flex g-jc-sb">
												<div class="g-orange-dark">￥{$y.ProductPrice}</div>
												<span class="g-black-middle">x{$y.ProductVol}</span></div>
										</div>
									</div>
								</div>
								{/volist}
							   
								<div class="g-bb g-pd g-flex g-fd-rr">
									<div class="g-orange-dark">总计：￥{$v.Amount}</div>
									<div class="g-col"></div>
								</div>
							</div>
							<div class="common-order-popover">
								<div class="g-row g-pd-tb g-pd-lr">
									<div class="g-flex g-jc-sb g-ai-c">
										<div class="__target" style="width: 10vw; position: relative;">
											<div class="__top">
												<div class="__triangle" style="display: none;"></div>
												<div class="__popover" style="display: none;"></div>
											</div>
										</div>
										<div class="g-row" style="width: 86vw;">
											{$v.Status|__order_status_btns}
										</div>
									</div>
								</div>
							</div>
						</a>
						{/volist}
					</div>
				</div>
			</div>
			{else /}
			<div style="transform: translateY(0px);">
				<div class="g-tc" style="margin-top: 25%;">
					<img src="http://oss.nawen1413.com/images/empty_state.png" alt="" class="g-m-b">
				</div>
			</div>
			<div class="_dropload _scroll" style="transform: translateY(0px);">
				<div class="_status">
					<span class="g-fs-26">没有内容可供显示</span>
				</div>
			</div>
			{/notempty}
		</div>
	</div>
			</div>
		</div>
	</div>
	
	<div class="c-share-back" data-func="goback">
		<div class="__content">
			<i class="iconfont icon-goback __icon"></i>
		</div>
	</div>
			

</div>

<style>
.dropload-down{ height:100px;  }
.dropload-up, .dropload-down{ font-size:26px; }
.dropload-refresh, .dropload-update, .dropload-load, .dropload-noData{ height:100px; line-height:100px; }
.dropload-load .loading { height: 30px; width: 30px; border-radius: 100%; margin: 12px; border: 4px solid #666; }

.layui-m-layer-msg .layui-m-layercont{ font-size:28px; line-height:44px; padding:20px 40px;}
.layui-m-layer2 .layui-m-layercont i{ background:#5c8dff; }

</style>

<script>

function goback(){
	location.href = "/";
}

$(function(){

	//状态切换
	$("[role='tablist']").find("[role='tab']").each(function(){
		$(this).click(function(){
			let status = parseInt($(this).attr('data-status'));
			$("[name='status']").val(status);
			$("[name='page']").val(1);
			$("[name='key']").val('');
			$('form.am-search').submit();
		});
	});
	
	//计算主体高度
	let _mh = $(window).height() - $('.g-search-box').outerHeight() - $('.am-tabs-bar').outerHeight();
	console.log(_mh);
	$('.scroll-container-0').css('min-height',_mh).css('height',_mh);
	
	//滚动
	$('.scroll-container-0').scroll(function () {
        var scrollTop = $(this).scrollTop(); //卷去高度
        var scrollHeight = $(this).height(); //可视区域高度
        var windowHeight = $('.scroll-item',this).height();
		//console.log('stop:'+ scrollTop+"，doch:"+scrollHeight+"，winh:"+windowHeight);
		if (canloadpage && scrollTop + scrollHeight >= windowHeight && lastscrollTop < scrollTop) {
			canloadpage = false;
			loadPage();
	　　}
		lastscrollTop = scrollTop;
	});
	
	bindOrderStatusBtnAction();
});

//状态按钮动作
function bindOrderStatusBtnAction(){
	$('.order-status-btn').unbind('click');
	$('.order-status-btn').bind('click',function(){
		let action = $(this).attr('data-action');
		order_status_btn_do($(this).parents('a').attr('data-id'),action);
		return false;
	});
}

var canloadpage = true; //加载数据时滚动无效
var lastscrollTop = 0;  //最后滚动高度
function loadPage(){
	let page = parseInt($("[name='page']").val());
	let postData = {
		'page' : ++page,
		'key' : "{$search.key}",
		'status' : "{$search.status}"
	}
	let iii = layer.open({type:2,shade:false});
	$.ajax({
		url : "{:url('Order/order_loadpage')}",
		type : "POST",
		dataType : "JSON",
		data : postData,
		success : function(e){
			layer.close(iii);
			if(e.data.list.length > 0){
				$("[name='page']").val(e.data.page);
			}
			parseOrderItemHtml(e.data.list);
		},error : function(){
		},complete : function(){
			layer.close(iii);
			canloadpage = true;
		}
	});
}

function order_status_btn_do(orderid,action){
	if(action =='quxiao'){
		//取消订单
		$.post("{:url('Order/cancel')}",{'orderid':orderid},function(e){
			layerMsg(e.info,function(){
				if(e.flag){ location.reload(); }
			});
		},'JSON');
	}else if(action =='zhifu'){
		//去支付
		location.href= "{:url('Order/pay')}?orderid="+orderid;
	}else if(action =='chedan'){
		//去撤单
		location.href= "{:url('Order/applycancel')}?orderid="+orderid;
	}else if(action =='shouhuo'){
		//确认收货
		lconfirm('确认执行收货操作吗？','',function(){
			AjaxJson("{:url('Order/receipt')}",{'orderid':orderid},function(e){
				layerMsg(e.info);
			},function(){
				layerMsg('操作失败');
			},function(){
			});
		});
	}else if(action == 'pinzheng'){
		//查看凭证
		location.href = "{:url('Order/checkrep')}?orderid="+orderid;
	}else if(action == 'wuliu'){
		//查看物流
		location.href = "{:url('Order/logistics')}?orderid="+orderid;
	}
}
function lconfirm(info,title,yes,no){
	if($('.lconfirm').length > 0){ return; }
	let html = '<div class="lconfirm"><div class="common-modal" style="position:fixed;"><div class="__bg __bg_enter"></div><div class="__fixed __enter" style="margin-top: 304.5px;"><p class="__close __bb"><div class="__title">TITLE</div></p><div class="__message">INFO</div><div class="__flex __jc-c __jd-c false false"></div><div class="__flex __pd __jc-c"><div class="__col __flex __jc-c"><div class="__btn __confirm_no">取消</div></div><div class="__col __flex __jc-c"><div class="__btn __orange __confirm_yes">确定</div></div></div></div></div></div>';
	
	html = html.replace(/TITLE/g,title).replace(/INFO/g,info);
	$('body').append(html);
	$('.__confirm_no').click(function(){
		$('.lconfirm').remove();
		if(typeof no == 'function') no();
	});
	$('.__confirm_yes').click(function(){
		$('.lconfirm').remove();
		if(typeof yes == 'function') yes();
	});
}
</script>


<!--引入时 绝对不能用type='text/javascript'，否则打死你都找不到错在哪-->
<script src="__JS__/jsrender.min.js"></script>

<script type="text/x-jsrender" id="ordertpl">
<%for%>
<a class="g-reset g-flex g-fd-c g-bg-white g-m-b" href="{:url('Order/detail')}?id=<%:OrderID%>">
	<div>
		<div class="g-flex g-jc-sb g-bb g-pd">
			<div>订单编号：<%:OrderID%></div>
			<div class="g-blue-middle" style="color: rgb(92, 141, 255);"><%:Status%></div>
		</div>
	</div>
	<div>
		<!--商品循环-->
		<%for Product%>
		<div>
			<div class="g-flex g-pd g-bb">
				<img src="<%:MainImg%>" alt="" class="g-img-140">
				<div class="g-flex g-fd-c g-col g-pd-lr g-jc-sb">
					<div class="g-twoline g-fs-30"><%:ProductName%></div>
					<small class="g-black-light">
						<span></span>
					</small>
					<div class="g-flex g-jc-sb">
						<div class="g-orange-dark">&yen;<%:ProductPrice%></div>
						<span class="g-black-middle">x<%:ProductVol%></span></div>
				</div>
			</div>
		</div>
		<%/for%>
		<div class="g-bb g-pd g-flex g-fd-rr">
			<div class="g-orange-dark">总计：<%:OrderAmount%></div>
			<div class="g-col"></div>
		</div>
	</div>
	<div class="common-order-popover">
		<div class="g-row g-pd-tb g-pd-lr">
			<div class="g-flex g-jc-sb g-ai-c">
				<div class="__target" style="width: 10vw; position: relative;">
					<div class="__top">
						<div class="__triangle" style="display: none;"></div>
						<div class="__popover" style="display: none;"></div>
					</div>
				</div>
				<div class="g-row" style="width: 86vw;">
					<%:buttons%>
				</div>
			</div>
		</div>
	</div>
</a>
<%/for%>
</script>

<script>
$.views.settings.delimiters("<%", "%>");
function parseOrderItemHtml(orderData){
	$('._dropload').remove();
	
	if(orderData.length < 1 && $('._dropload').length < 1){
		let _t = '<div class="_dropload _scroll" style="transform: translateY(0px);"><div class="_status"><span class="g-fs-26" style="line-height:3em;">我是有底线的</span></div></div>';
		if($('#order-items').length < 1){
			return;
		}
		$('#order-items').append(_t);
		return;
	}
	
	var template = $.templates("#ordertpl");
	var html = template.render(orderData);
	
	let head,foot = '';
	if($('#order-items').length < 1){
		//当前没显示订单数据
		head = "<div class='scroll-item' style='transform: translateY(0px);'><div><div id='order-items'>";
		foot = "</div></div></div>";
		$('.scroll-container-0').html(head+html+foot);
	}else{
		$('#order-items').append(html);
	}
	bindOrderStatusBtnAction();
}
</script>



</body>
</html>